<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String id=null;
    try {
        id=request.getSession().getAttribute("username").toString();
    }catch (Exception e){
        e.printStackTrace();
    }
%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>首页</title>
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!--头部-->
    <header class="top">
        <div class="w">
            <div class="top-left">
                <img src="images/Q-logo.png">
            </div>
            <div class="top-center">
                <input placeholder="搜索你感兴趣的课程" id="wd">
                <script>
                    function search() {
                        var wd=document.getElementById('wd');
                        window.location.href="search-result.jsp?wd="+wd.value;
                    }
                </script>
                <button class="iconfont" onclick="search()">&#xe63c;</button>
            </div>
            <div class="top-right">
                <ul>
                    <a href="index.jsp"><li class="current">首页</li></a>
                    <a href="login.jsp"><li>登录注册</li></a>
                    <script>
                        function haveId() {
                            var id=<%=id%>;
                            if(id==null){
                                alert("请登录！");
                                return false;
                            }
                        }
                    </script>
                    <a href="self.jsp"><li onclick="return haveId()">个人主页</li></a>
                </ul>
            </div>
        </div>
    </header>

    <!--中部-->
    <section class="main" id="slider">
        <div class="main-casual">
            <ul id="ul">
                <li><img src="images/casual.png" alt=""></li>
                <li><img src="images/casual_bottom.gif" alt=""></li>
            </ul>
        </div>
        <ol id="ol">
        </ol>
    </section>

    <!--尾部-->
    <footer class="bottom">
        <div class="w">
            <span>服务介绍</span>
            <div class="bottom-service">
                <div>
                    <img src="images/video.jpg"/>
                    <p>丰富的视频资源帮助学生更好地学习</p>
                </div>
                <div>
                    <img src="images/cloud.jpg"/>
                    <p>基于认知负荷的多少推荐课程</p>
                </div>
                <div>
                    <img src="images/text.jpg"/>
                    <p>方案多多，适合每一位学生</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="js/myFunc.js"></script>
    <script>
        window.onload = function () {
            // 1. 获取需要的标签
            var lis = $("ul").children;
            var currentIndex = 0, indicatorIndex = 0;

            // 2. 克隆li标签
            $("ul").appendChild(lis[0].cloneNode(true));

            // 3. 动态创建页码
            for (var i = 0; i < lis.length - 1; i++) {
                var li = document.createElement("li");
                $("ol").appendChild(li);
            }

            // 4. 第一个选中
            $("ol").children[0].className = "current";

            // 5.鼠标进入圆点
            var olLis = $("ol").children;
            for (var j = 0; j < olLis.length; j++) {
                (function (j) {
                    // 5.1 获取单独的li标签
                    var li = olLis[j];

                    // 5.2 鼠标进入
                    li.onmouseover = function () {
                        for (var i = 0; i < olLis.length; i++) {
                            olLis[i].className = "";
                        }

                        this.className = "current";

                        // 5.3 动起来
                        constant($("ul"), -(800 * j), 30);
                        currentIndex = indicatorIndex = j;
                    };
                })(j);
            }

            // 6.自动轮播
            var timer = setInterval(autoPlay, 6000);


            // 7. 清除和设置定时器
            $("slider").onmouseover = function () {
                clearInterval(timer);
            };

            $("slider").onmouseout = function () {
                timer = setInterval(autoPlay, 6000);
            };


            function autoPlay() {
                // 6.1 ul滚起来
                currentIndex++;
                if (currentIndex > lis.length - 1) {
                    $("ul").style.left = 0;
                    currentIndex = 1;
                }
                constant($("ul"), -currentIndex * 800, 30);

                // 6.2 指示器滚起来
                indicatorIndex++;
                if (indicatorIndex > olLis.length - 1) {
                    indicatorIndex = 0;
                }
                for (var i = 0; i < olLis.length; i++) {
                    olLis[i].className = "";
                }

                olLis[indicatorIndex].className = "current";

            }
        }
    </script>
</body>
</html>